
import { Button, Divider, Form, Input, Popover, Select } from "antd"
import { SyntheticEvent, useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import moreOperationImage from "../../../../../../assets/image/通用／icon／line／更多操作@2x.png"
import HomePage_ModalComponent from "../../../../../../components/modal"
import HomePage_TableComponent from "../../../../../../components/table"
import { $eventBus, $StopPropagation } from "../../../../../../common/utils"
import lessModule from "./index.module.less"
import { log } from "console"
import { useForm } from "antd/es/form/Form"

// 主页-系统配置页面-账号管理页面-左边菜单组件-弹窗内容组件
interface accountManagementPageModalContentComponentPropsInterface {
    modalData: object
    get_isModalClose: Function
}
const AccountManagementPage_ModalContentComponent: React.FC<accountManagementPageModalContentComponentPropsInterface> = (props) => {
    const [form] = useForm()
    const initialValuesData = {
        accountname: "",
        password: "",
        phone: "",
        power: "普通用户"
    }
    const formItemList = [
        {
            name: "accountname",
            label: "账号名称",
            rules: [{ required: true, message: '请输入' }],
            width: 50,
            widthItem: 300 / 320 * 100,
            type: "input",
        },
        {
            name: "password",
            label: "账号密码",
            rules: [{ required: true, message: '请输入' }],
            width: 50,
            widthItem: 300 / 320 * 100,
            type: "passwordInput"
        },
        {
            name: "teamname",
            label: "联系电话",
            rules: [{ required: true, message: '请选择' }],
            width: 50,
            widthItem: 300 / 320 * 100,
            type: "input",
        },
        {
            name: "power",
            label: "账号权限类型",
            rules: [{ required: true, message: '请选择' }],
            width: 50,
            widthItem: 300 / 320 * 100,
            type: "select",
            option: [{ name: "普通用户" }, { name: "管理员" }, { name: "超级管理员" }]
        },
    ]



    const init_form = () => {
        if (props.modalData["typeName"] === "编辑账号") {

            Object.keys(initialValuesData).forEach((item) => {
                initialValuesData[item] = props.modalData[item]

            })

            form.setFieldsValue(initialValuesData)
        }
    }
    const click_closeModal = () => {
        props.get_isModalClose(false)
    }

    const onFinish = (values: object) => {
        click_closeModal()

    };
    useEffect(() => {
        init_form()

    }, [props.modalData])
    return (
        <div className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageModalContentComponent"]}`}>
            <div className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageModalContentComponent__header"]}`}>
                <>
                    {
                        props.modalData["typeName"] === "新建账号" && <span>新建账号</span>
                    }
                </>
                <>
                    {
                        props.modalData["typeName"] === "编辑账号" && <span>编辑账号</span>
                    }
                </>
                <>
                    {
                        props.modalData["typeName"] === "删除账号" && <span>删除账号</span>
                    }
                </>
            </div>
            <div className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageModalContentComponent__main"]}`}>
                <Form
                    form={form}
                    initialValues={initialValuesData}
                    onFinish={onFinish}
                >
                    <>
                        {
                            ["新建账号", "编辑账号"].includes(props.modalData["typeName"]) && formItemList.map((item, idx) => {
                                return (
                                    <Form.Item
                                        className={`${lessModule["accountManagementPageModalContentComponent-main__formItem"]}`}
                                        style={{ width: `${item["width"]}%`, paddingLeft: idx % 2 ? "20px" : "0" }}
                                        key={"formItemList" + idx}
                                        labelCol={{ span: 24 }}
                                        required={false}
                                        name={item["name"]}
                                        label={`${item["label"]}：：`}
                                        rules={item["rules"]}
                                    >

                                        {
                                            item["type"] === "input" ? <Input style={{ width: `calc(${item["widthItem"]}% + ${idx % 2 ? "18.75px" : "0px"})` }} placeholder="请输入" autoComplete="off" />
                                                : item["type"] === "passwordInput" ? <Input.Password style={{ width: `calc(${item["widthItem"]}% + ${idx % 2 ? "18.75px" : "0px"})` }} placeholder="请输入" autoComplete="off" />
                                                    : item["type"] === "select" && <Select
                                                        style={{ width: `calc(${item["widthItem"]}% + ${idx % 2 ? "18.75px" : "0px"})` }}
                                                        options={item["option"]}
                                                        fieldNames={{ label: "name", value: "name" }}
                                                    />

                                        }

                                    </Form.Item>
                                )
                            })
                        }
                    </>
                    <>
                        {
                            ["删除账号"].includes(props.modalData["typeName"]) && <span className={`${lessModule["accountManagementPageModalContentComponent-main__delete"]}`}>你确定要删除“”吗？</span>
                        }
                    </>
                    <Form.Item className={`${lessModule["accountManagementPageModalContentComponent-main__formItem"]}`}>
                        <div className={`${lessModule["main-formItem__opertaionRow"]}`}>
                            <Button className={`${lessModule["formItem-opertaionRow__btn"]} ${lessModule["formItem-opertaionRow__btnLeft"]}`} onClick={() => click_closeModal()}>取 消</Button>
                            <Button className={`${lessModule["formItem-opertaionRow__btn"]} ${lessModule["formItem-opertaionRow__btnRight"]}`} htmlType="submit">确 定</Button>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}



// 主页-系统配置页面-账号管理页面-表格组件
const AccountManagementPage_TableComponent: React.FC = () => {
    const columnList = [
        {
            title: '序号',
            dataIndex: 'idx',
            render: (text: string, record: object, idx: number) => `${idx + 1}`,
        },
        {
            title: '账号ID',
            dataIndex: 'name',
        },
        {
            title: '账号名',
            dataIndex: 'name',
        },
        {
            title: '联系电话',
            dataIndex: 'name',
        },
        {
            title: '账号权限',
            dataIndex: 'name',
        },
        {
            title: '操作',
            align: "right",
            render: (text: string, record: object) => (
                <>
                    <span className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageTableComponent__label"]}`} onClick={() => click_operation("编辑账号", record)}>编辑</span>
                    <Divider className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageTableComponent__divider"]}`} type="vertical" />
                    <span className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageTableComponent__label"]}`} onClick={() => click_operation("删除账号", record)}>删除</span>
                </>
            )
        },
    ]
    const [sourceData, setSourceData] = useState<object>({
        list: [{}]
    })


    const get_pagination = (page: number, pageSize: number) => {

    }
    const click_operation = (typeName: string, accountData: object) => {
        accountData["accountname"] = "55555"
        accountData["phone"] = "55555"
        $eventBus.emit("eventBus_homePageSystemConfigurationPageAccountManagementPageModalData", Object.assign({ typeName, ...accountData }))
    }


    return (
        <div className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage-accountManagementPageTableComponent"]}`}>
            <HomePage_TableComponent columnList={columnList} sourceData={sourceData} get_pagination={get_pagination} />

        </div>
    )
}
// 主页-系统配置页面-账号管理页面
const HomePage_SystemConfigurationPage_AccountManagementPage: React.FC = () => {
    const [modalData, setModalData] = useState<object>({})
    const [isModal, setIsModal] = useState<boolean>(false)
    const [isPrepareCloseModal, setIsPrepareCloseModal] = useState<boolean>(false)

    const get_isModalClose = () => {
        setIsPrepareCloseModal(true)
        setTimeout(() => {
            setIsModal(false)
            setIsPrepareCloseModal(false)
        }, 50);
    }

    const eventBus_on = () => {
        // 主页-系统配置页面-账号管理页面-表格组件弹窗数据
        $eventBus.addListener("eventBus_homePageSystemConfigurationPageAccountManagementPageModalData", (res) => {
            setIsModal(true)
            setModalData(res)
        })
    }

    const eventBus_off = () => {
        // 主页-系统配置页面-账号管理页面-表格组件弹窗数据
        $eventBus.removeAllListeners("eventBus_homePageSystemConfigurationPageAccountManagementPageModalData")
    }

    useEffect(() => {
        eventBus_on()
        return () => {
            eventBus_off()
        }
    }, [])
    return (
        <div className={`${lessModule["homePageSystemConfigurationPageAccountManagementPage"]}`}>
            <AccountManagementPage_TableComponent />
            <>
                {isModal && <HomePage_ModalComponent isPrepareCloseModal={isPrepareCloseModal} get_isModalClose={get_isModalClose} ModalContentComponents={<AccountManagementPage_ModalContentComponent modalData={modalData} get_isModalClose={get_isModalClose} />} />}
            </>
        </div>
    )
}
export default HomePage_SystemConfigurationPage_AccountManagementPage